<template>
  <div>
    <el-row class="row-bg" style="padding: 100px 2vw 30px 2vw">
        <dv-border-box-10 :color="['rgb(13,0,0)','rgb(34,69,114)']">
          <el-card shadow="hover" class="digital-card" style="vertical-align: center;padding-top: 0px;padding-bottom: 10px">
<!--            <el-row>-->
<!--              <el-col :span="11" style="margin-top: 4px;">-->
<!--                <span class="number-content">总告警数</span>-->
<!--              </el-col>-->
<!--              <el-col :span="13">-->
<!--                <span class="number red">{{ totalAlarmNum }}</span>-->
<!--              </el-col>-->
<!--            </el-row>-->
            <bar-chart
                :bar-set="bar1"
            ></bar-chart>
          </el-card>
        </dv-border-box-10>

        <dv-border-box-10 :color="['rgb(13,0,0)','rgb(34,69,114)']">
          <el-card shadow="hover" class="digital-card" style="vertical-align: center;padding-top: 20px;padding-bottom: 5px">
<!--            <el-row>-->
<!--              <el-col :span="11" style="margin-top: 4px;">-->
<!--                <span class="number-content">一级告警数</span>-->
<!--              </el-col>-->
<!--              <el-col :span="13">-->
<!--                <span class="number">{{ classoneAlarmNum }}</span>-->
<!--              </el-col>-->
<!--            </el-row>-->
              <bar-chart :bar-set="bar2"
              ></bar-chart>
          </el-card>
        </dv-border-box-10>

        <dv-border-box-10 :color="['rgb(13,0,0)','rgb(34,69,114)']">
          <el-card shadow="hover" class="digital-card" style="vertical-align: center;padding-top: 20px;padding-bottom: 10px">
<!--            <el-row>-->
<!--              <el-col :span="11" style="margin-top: 4px;">-->
<!--                <span class="number-content">二级告警数</span>-->
<!--              </el-col>-->
<!--              <el-col :span="13">-->
<!--                <span class="number">{{ classtwoAlarmNum }}</span>-->
<!--              </el-col>-->
<!--            </el-row>-->
              <bar-chart :bar-set="bar3"
              ></bar-chart>
          </el-card>
        </dv-border-box-10>
      </el-row>
  </div>
  </template>

<script>
// import request from '@/network/request'
import barChart from './barChart'
export default {
  name: 'alarmData',
  components:{
    barChart
  },
  data () {
    return {
        timer: null,
        totalAlarmNum: 0,
        monthAlarmNum: 0,
        classoneAlarmNum: 0,
        classtwoAlarmNum: 0,
        bar1:{
            barIndex:'1',
            title:'近七天选矿',
            dataAxis:['11-02', '11-03', '11-04', '11-05', '11-06', '11-07', '11-08'],
            data:[152235, 60000, 150000, 10000, 90000, 110000, 70000],
        },
        bar2:{
            barIndex:'2',
            title:'近七天宏基建设',
            dataAxis:['11-02', '11-03', '11-04', '11-05', '11-06', '11-07', '11-08'],
            data:[15223, 20000, 60000, 50000, 15000, 30000, 20000],
        },
        bar3:{
            barIndex:'3',
            title:'近七天地采',
            dataAxis:['11-02', '11-03', '11-04', '11-05', '11-06', '11-07', '11-08'],
            data:[15235, 6000, 15000, 10000, 9000, 7000, 3000],
        }
    }
  },
  created () {

  },
  mounted () {
    this.timer = setInterval(() => {
      this.getData()
    }, 5000
    )
  },
  beforeDestroy () {
    clearInterval(this.timer)
  },
  methods: {

  }
}
</script>

<style scoped>
@import "../../../assets/scss/font.css";
.digital-card{
  border-radius: 10px;
  height: 18vh;
  margin-bottom: 4vh;
  border: none;
  background-color: rgba(4,17,53, 0.2);
}
.number {
  font-size: 2.5vw;
  font-family: led,serif;
}
.number-content {
  font-size: 1.2vw;
  font-family: serif;
  padding-top: 2vh;
}
.red{
  color: red;
}
</style>
